<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0,user-scalable=no,maximum-scale=1" media="(device-height: 568px)">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="HandheldFriendly" content="True">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<title>云π</title>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" />
<link rel="stylesheet" type="text/css" media="all" href="css/style.css" />

<script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
<script src="js/clipboard.min.js" type="text/javascript"></script>
<script src="js/js.js" type="text/javascript"></script>
<style type="text/css">
	body{background:url(img/bg.png) no-repeat top left;background-size:100% 100%;}
</style>

</head>
<body style="position: relative;">
	<!-- 头部 -->
	<div class="header">
		<a href="javascript:history.go(-1);" class="hele"></a>
		<h1 class="hetitle">确认订单</h1>
	</div>
	
	<div id="page" class="page m">
		<div class="deorlist">
			<div class="deoritem">
				<p class="deort1">矿机类型</p>
				<div class="deorid">
					<input type="text" class="deorinput" value="微型矿机" readonly=""/>
				</div>
			</div>
			<div class="deoritem">
				<p class="deort1">运行周期</p>
				<div class="deorid">
					<input type="text" class="deorinput" value="180天" readonly=""/>
				</div>
			</div>
		</div>
		<div class="deorlist">
			<div class="deoritem">
				<p class="deort1">矿机算力</p>
				<div class="deorid">
					<input type="text" class="deorinput" value="4500  ClC" readonly=""/>
				</div>
			</div>
			<div class="deoritem">
				<p class="deort1">付款金额</p>
				<div class="deorid">
					<input type="text" class="deorinput" value="4500  ClC" readonly=""/>
				</div>
			</div>
			<div class="deoritem">
				<p class="deort1">钱包地址</p>
				<div class="deorid">
					<input type="text" class="deorinput deorinput2" id="foo" value="asdasfa65465465465" readonly=""/>
					<a href="javascript:;" class="deorilink" id="deorilink" data-clipboard-target="#foo" aria-label="复制成功！">复制</a>
				</div>
			</div>
		</div>
		<p class="do2t">上传凭证</p>
		<div class="deor2file">
			
			<img src="img/do2filpic.png" alt="" class="do2filpic" id="headImg"/>
			<input type="file" class="do2file" id="fileInput"/>
		</div>
		<a href="javascript:;" class="deorlink">确认提交</a>
	</div>
</body>
<script type="text/javascript">
	$(function(){
		//背景高宽
		$("body").width($(document).outerWidth(true));
		$("body").height($(document).outerHeight(true));
		
		//复制地址
		var clipboard = new Clipboard('#deorilink');
		clipboard.on('success', function(e) { 
		    var msg = e.trigger.getAttribute('aria-label'); 
		    alert(msg); 
		    e.clearSelection();
		});
		
		//照片显示
		//建立一個可存取到該file的url
		function getObjectURL(file) {
		    var url = null;
		    if (window.createObjectURL != undefined) { // basic
		        url = window.createObjectURL(file);
		    } else if (window.URL != undefined) { // mozilla(firefox)
		        url = window.URL.createObjectURL(file);
		    } else if (window.webkitURL != undefined) { // webkit or chrome
		        url = window.webkitURL.createObjectURL(file);
		    }
		    return url;
		}
		//用户的头像立即查看
		$("#fileInput").change(function() {
		    var objUrl = getObjectURL(this.files[0]);
		    if (objUrl) {
		        $("#headImg").attr("src", objUrl);
		    }
		});

	})
</script>
</html>